<!-- 我要定制 -->
<template>
  <div>
    <div class="box">
      <web-header></web-header>
      <el-form label-width="120px" :model="data" ref="update">
        <div class="title">{{$t('lan.personalInformation')}}</div>
        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('lan.name')">
              <el-input v-model="data.name" :placeholder="$t('lan.pleaseName')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('lan.phone')">
              <el-input type="number" v-model="data.mobile" :placeholder="$t('lan.pleasePhone')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('lan.industry')">
              <el-input v-model="data.industry" :placeholder="$t('lan.pleaseIndustry')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">{{$t('lan.customRequirements')}}</div>
        <div class="mainSystem">
          <div class="bt1">{{$t('lan.isSoftware')}}</div>
          <div v-for="i in ceiling" :key="i.id" @click="selectCollection(i,'uiFlag')" :class="data.uiFlag === i.id?'mainSelect':'mainSelectd'">
            <span>{{i.code}}</span>
          </div>
        </div>
        <div class="mainSystem">
          <div class="bt1">{{$t('lan.isLogo')}}</div>
          <div v-for="i in ceiling" :key="i.id" @click="selectCollection(i,'logoFlag')" :class="data.logoFlag === i.id?'mainSelect':'mainSelectd'">
            <span>{{i.code}}</span>
          </div>
        </div>
        <el-row style="padding-top:50px;clear:both">
          <el-col :span="22">
            <el-form-item :label="$t('lan.other')">
              <el-input type="textarea" v-model="data.content" :placeholder="$t('lan.placeholder')" :rows="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :offset="10">
            <el-button @click="save" :style="{'background':'#4abe84','color':'#fff','width':'100%','height':'50px'}" round>{{$t('lan.submit')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { cameraList, stepList, colorList } from '../common'
import { customizeSave } from '../api'
import { Notification } from 'element-ui'
export default {
  data () {
    return {
      data: {
        mobile: '',
        name: '',
        industry: '',
        content: '',
        uiFlag: '',
        logoFlag: '',
        productId: +this.$route.query.productId,
        categoryId: +this.$route.query.id,
        userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : ''
      },
      ceiling: cameraList,
    }
  },
  methods: {
    selectCollection (val, type) {
      if (type === 'uiFlag') {
        if (this.data.uiFlag === val.id) return this.data.uiFlag = ''
        this.data.uiFlag = val.id
      } else {
        if (this.data.logoFlag === val.id) return this.data.logoFlag = ''
        this.data.logoFlag = val.id
      }
    },
    async save () {
      const reg = /^1[1|2|3|4|5|6|8|7|9][0-9]\d{4,8}$/
      if (!this.data.name) return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.pleasecannot') })
      if (!this.data.mobile) return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.pleaseMobile') })
      if (!reg.test(this.data.mobile)) return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.phoneFormat') })
      if (!this.data.industry) return Notification({ type: 'error', title: this.$t('lan.error'), message: this.$t('lan.industryEmpty') })
      try {
        const data = await customizeSave(this.data)
        Notification({ type: 'success', title: this.$t('lan.success'), message: this.$t('lan.customSuccess') })
        setTimeout(() => this.$router.push('/'), 1000)
      } catch (err) { }
    }
  },
  mounted () {
  }
}
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 30px auto;
}
.title {
  margin: 10px 20px 20px;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-left: 5px;
  text-align: left;
  box-sizing: border-box;
  font-size: 18px;
  border-bottom: 1px solid #e5e5e5;
}
.mainSystem {
  float: left;
  margin: 10px 30px;
  width: 100%;
  cursor: pointer;
}
.bt1 {
  font-size: 18px;
  color: #2c2c2c;
}
.mainSystemContent {
  width: 90%;
  float: left;
}
.mainSelect {
  float: left;
  position: relative;
  width: 160px;
  height: 80px;
  margin: 10px 10px;
  line-height: 80px;
  color: #4abe84;
  background-color: #fff;
  text-align: center;
  border-radius: 7px;
  border: 1px solid rgba(74, 190, 132, 1);
  box-sizing: border-box;
}
.mainSelect span,
.mainSelectd span {
  font-size: 16px;
}
.mainSelect:before {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  border: 17px solid #4abe84;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-right-radius: 6px;
}
.mainSelect:after {
  content: "";
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.mainSelectd {
  float: left;
  position: relative;
  width: 160px;
  height: 80px;
  margin: 10px 10px;
  line-height: 80px;
  color: #7b7b7b;
  font-size: 16px;
  background-color: #fff;
  text-align: center;
  border-radius: 7px;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}
</style>